<template>
  <el-dialog
    title="数据导入"
    :visible.sync="visible"
    width="500px"
    :close-on-click-modal="false"
    :before-close="handleClose"
    append-to-body>
      <el-upload
        :show-file-list="false"
        accept="application/x- www-form-urlencoded, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain,application/pdf,application/x-zip-compressed,application/octet-stream"
        :action="action"
        :data="dataForm"
        :on-success="fileUploadSuccess"
        :on-error="fileUploadError" :disabled="excelBtnText=='正在导入'"
        :before-upload="beforeFileUpload" style="display: inline">
        <el-button type="success" :loading="excelBtnText=='正在导入'"><i style="margin-right: 5px">{{excelBtnText}}</i></el-button>
      </el-upload>
      <a href="../../excel/import_sport_history_high_template.xlsx" download="高强度间歇训练模板.xlsx">下载Excel模板=====</a>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        btnLoading: false,
        excelBtnText: '选择Excel',
        action: this.$http.requestUrl('/sport/sporthistoryhigh/excelImport'),
        dataForm: {
          token: `${this.$cookie.get('token')}`
        }
      }
    },
    methods: {
      init () {
        this.visible = true
        this.$nextTick(() => {
        })
      },
      fileUploadSuccess (response, file, fileList) {
        if (response) {
          this.$message({type: response.status, message: response.msg})
        }
        this.excelBtnText = '选择Excel'
        this.$emit('refreshDataList')
        this.visible = false
      },
      fileUploadError (file, fileList) {
        this.$message({type: 'error', message: '导入失败!'})
        this.excelBtnText = '选择Excel'
      },
      beforeFileUpload (file) {
        this.excelBtnText = '正在导入'
      },
      handleClose (done) {
        done()
      }
    }
  }
</script>
